﻿<Fluent:RibbonWindow x:Class="MySQLQueryMonitor.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:Fluent="clr-namespace:Fluent;assembly=Fluent"
        xmlns:local="clr-namespace:MySQLQueryMonitor"
        xmlns:vm="clr-namespace:MySQLQueryMonitor.ViewModel"
        xmlns:util="clr-namespace:MySQLQueryMonitor.Util"
        xmlns:toolkit="http://schemas.microsoft.com/wpf/2008/toolkit"
        Title="MySQL Query Monitor"
		x:Name="RibbonWindow"
		Width="640" Height="480" xmlns:xctk="http://schemas.xceed.com/wpf/xaml/toolkit">

    <Fluent:RibbonWindow.Resources>
        <util:DeviceNameConverter x:Key="deviceNameConverter" />
        <util:InverseBooleanConverter x:Key="inverseBooleanConverter" />
        <DataTemplate x:Key="fontItemTemplate">
            <TextBlock Text="{Binding Value}" FontFamily="{Binding Value}" />
        </DataTemplate>
    </Fluent:RibbonWindow.Resources>
    
    <Fluent:RibbonWindow.DataContext>
        <vm:MainViewModel />
    </Fluent:RibbonWindow.DataContext>
    
	<Grid x:Name="LayoutRoot">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="Auto" />
            <RowDefinition Height="*"/>
            <RowDefinition Height="Auto" />
        </Grid.RowDefinitions>

        <Fluent:Ribbon x:Name="Ribbon" SelectedTabIndex="0">
            <Fluent:Ribbon.ToolBarItems>
                <Fluent:Button Width="30" Command="{Binding AboutCommand}">
                    <Fluent:Button.LargeIcon>
                         <Image VerticalAlignment="Top" Height="16" Width="16" Source="/MySQLQueryMonitor;component/Images/109_AllAnnotations_Info_16x16_72.png" />
                    </Fluent:Button.LargeIcon>
                </Fluent:Button>
            </Fluent:Ribbon.ToolBarItems>
            <Fluent:RibbonTabItem x:Name="HomeTab" Header="Home">
                <Fluent:RibbonGroupBox Header="Monitor">
                    <Fluent:ToggleButton IsChecked="{Binding Model.IsMonitoring, Mode=TwoWay}" IsEnabled="{Binding Model.IsDeviceSelected}" Header="Start">
                        <Fluent:ToggleButton.LargeIcon>
                            <Grid Width="32" Height="32">
                                <Image Source="/MySQLQueryMonitor;component/Images/Network_ConnectTo32.png" />
                            </Grid>
                        </Fluent:ToggleButton.LargeIcon>
                    </Fluent:ToggleButton>
                </Fluent:RibbonGroupBox>
                <Fluent:RibbonGroupBox Header="Log">
                    <Fluent:Button x:Name="clearButton" Header="Clear" Command="{Binding ClearLogCommand}">
                        <Fluent:Button.LargeIcon>
                            <Grid Width="32" Height="32">
                                <Image Source="/MySQLQueryMonitor;component/Images/delete32.png" />
                            </Grid>
                        </Fluent:Button.LargeIcon>
                    </Fluent:Button>
                    <Fluent:Button x:Name="saveButton" Header="Save" Command="{Binding SaveLogCommand}">
                        <Fluent:Button.LargeIcon>
                            <Grid Width="32" Height="32">
                                <Image Source="/MySQLQueryMonitor;component/Images/1346466292_save.png" />
                            </Grid>
                        </Fluent:Button.LargeIcon>
                    </Fluent:Button>
                </Fluent:RibbonGroupBox>

            </Fluent:RibbonTabItem>
            <Fluent:RibbonTabItem x:Name="ConfigTab" Header="Config">
                <Fluent:RibbonGroupBox Header="Network">
                    <Fluent:Spinner Header="Port" Value="{Binding Model.Port}"
                                    IsEnabled="{Binding Model.IsMonitoring, Converter={StaticResource inverseBooleanConverter}}"
                                    Minimum="0" Maximum="65534" Format="F0" InputWidth="60">
                        <Fluent:Spinner.Icon>
                            <Image Source="/MySQLQueryMonitor;component/Images/1346457297_network-wired.png" />
                        </Fluent:Spinner.Icon>
                    </Fluent:Spinner>
                </Fluent:RibbonGroupBox>
                <Fluent:RibbonGroupBox Header="Font">
                    <Fluent:ComboBox Header="Font" ItemsSource="{Binding FontFamilies}" ItemTemplate="{StaticResource fontItemTemplate}"
                                     SelectedValue="{Binding FontFamily}" SelectedValuePath="Value" GroupBy="Group" InputWidth="100">
                        <Fluent:ComboBox.Icon>
                            <Image Source="/MySQLQueryMonitor;component/Images/FontHS.png" />
                        </Fluent:ComboBox.Icon>
                    </Fluent:ComboBox>
                    <Fluent:Spinner Header="Size" Minimum="8" Maximum="72" Value="{Binding FontSize, Mode=TwoWay}" InputWidth="50" HorizontalAlignment="Left">
                        <Fluent:Spinner.Icon>
                            <Image Source="/MySQLQueryMonitor;component/Images/FontSize.png" />
                        </Fluent:Spinner.Icon>
                    </Fluent:Spinner>
                </Fluent:RibbonGroupBox>
            </Fluent:RibbonTabItem>
        </Fluent:Ribbon>
        <Grid Grid.Row="1" Margin="3">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="Auto" />
                <ColumnDefinition Width="383*" />
            </Grid.ColumnDefinitions>
            <Label>Device</Label>
            <ComboBox Height="24" Grid.Column="1" ItemsSource="{Binding Devices}"
                      IsEnabled="{Binding Model.IsMonitoring, Converter={StaticResource inverseBooleanConverter}}"
                      SelectedValue="{Binding Model.Device}" DisplayMemberPath="Description" />
        </Grid>
        <DataGrid AutoGenerateColumns="False" Grid.Row="2" ItemsSource="{Binding Model.CommandLog}"
                  FontFamily="{Binding FontFamily}" FontSize="{Binding FontSize}"
                  VerticalGridLinesBrush="LightGray" HorizontalGridLinesBrush="LightGray">
            <DataGrid.Columns>
                <DataGridTextColumn Header="Time Stamp" Binding="{Binding TimeStamp}" />
                <DataGridTextColumn Header="SQL Statement" Binding="{Binding Statement}" Width="*" />
            </DataGrid.Columns>
        </DataGrid>
        <StatusBar Grid.Row="3" >
            <StatusBarItem>
                <Label Content="{Binding Model.Device, Converter={StaticResource deviceNameConverter}}" />
            </StatusBarItem>
        </StatusBar>
    </Grid>
</Fluent:RibbonWindow>
